{extend name="main"}
{block name="style"}
<style type="text/css">
	.files-list{
		display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
		flex-wrap: wrap;
		justify-content:flex-start;
		align-items: flex-start;
		align-content: flex-start;
		overflow-y: auto;
	}
	.files-item{
		-webkit-box-flex:  0 0 120px; 
		-webkit-flex:  0 0 120px; 
		flex: 0 0 120px;
		max-width: 120px;
		height: 147px;
		margin:6px 0 0 6px;
		text-align: center;
	}
	.files-item .el-image{
		width: 110px;
		height: 110px;
		margin: 5px auto 0 auto;
		display: block;
	}
	.el-icon-placeholder{width: 14px}
	.font-files,.slot-font{
		width: 110px;
		height: 110px;
		margin: 5px auto 0 auto;
		line-height: 110px;
		font-size: 4rem;
	}
	.slot-font{
		font-size: 1rem;
	}
	.el-image-viewer__close{color:#fff;}
</style>
{/block}
{block name="body"}
<div class="bg-white">
	<div class="border-bottom flex p-3 flex-center">
		<div class="flex-1 small text-secondary">
			{{search.uid?'搜索用户"'+search.uid+'",':''}}
			<el-link v-if="list.length < search.total" @click="initHtml" :underline="false">继续加载</el-link>
			<el-link v-else :underline="false">已全部加载</el-link>
			<el-link :underline="false">，共{{search.total}}个</el-link>
		</div>
		<div class="pr-3">
			<el-popover
			  placement="left"
			  width="200"
			  trigger="click">
    			<el-input v-model="uid" @keyup.enter.native="setUid" placeholder="UID" size="small"></el-input>
				<el-button type="info" icon="el-icon-search" slot="reference" circle size="mini"></el-button>
			</el-popover>
		</div>
		<div class="pr-3">
			<el-dropdown
			    @command="setType">
			  <el-button type="info" icon="el-icon-finished" size="mini" class="p-2"></el-button>
			  <el-dropdown-menu slot="dropdown">
			    <el-dropdown-item 
			    :icon="search.type=='all'?'el-icon-check':'el-icon-placeholder'"
			    command="all">全部</el-dropdown-item>
			    <el-dropdown-item 
			    v-for="v in statusAlias"
			    :icon="search.type==v.value?'el-icon-check':'el-icon-placeholder'" :command="v.value">{{v.title}}</el-dropdown-item>
			  </el-dropdown-menu>
			</el-dropdown>
		</div>
		<div class="pr-3">
			<el-dropdown
			    @command="setSort">
			  <el-button type="info" icon="el-icon-sort" size="mini" class="p-2"></el-button>
			  <el-dropdown-menu slot="dropdown">
			    <el-dropdown-item 
			    :icon="search.sort=='size'?'el-icon-check':'el-icon-placeholder'"
			    command="size">大小</el-dropdown-item>
			    <el-dropdown-item 
			    :icon="search.sort=='time'?'el-icon-check':'el-icon-placeholder'" command="time">时间</el-dropdown-item>
			  </el-dropdown-menu>
			</el-dropdown>
		</div>
	</div>
	<div
	:style="{height:h+'px'}" 
	v-infinite-scroll="initHtml" 
	:infinite-scroll-distance="h"
	:infinite-scroll-disabled="search.ajax"
	class="files-list">
		<div class="files-item" v-for="(v,index) in list">
			<el-image :key="v.url" :src="v.url" lazy v-if="imageMime.indexOf(v.mime)>=0" :preview-src-list="previewList" :title="getTitle(v)" fit="cover">
		      <div slot="placeholder" class="font-files slot-font">
		      	<i class="el-icon-loading"></i>
		      </div>
		      <div slot="error" class="font-files text-secondary">
		        <i class="el-icon-picture-outline"></i>
		      </div>
			</el-image>
			<div class="font-files text-secondary" v-else :title="getTitle(v)">
				<i class="el-icon-document"></i>
			</div>
			<div class="flex small text-secondary">
				<div class="flex-1 text-truncate pr-1">
					{{v.create_time}}
				</div>
				<div>{{v.ext.toUpperCase()}}</div>
			</div>
		</div>
		<p v-if="search.ajax && list.length<search.total"
		class="w-100 text-center text-secondary small py-3"><i class="el-icon-loading"></i>加载中...</p>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="statusAlias"}
	var statusAlias=[];
	{else/}
	var statusAlias={:json_encode($statusAlias,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
var vm=new Vue({
	el:'#app',
	data:{
		view:XYBase.view,
		h:300,
		uid:'',
		statusAlias:statusAlias,
		search:{
			uid:'',
			type:'all',
			sort:'time',
			ajax:false,
			page:1,
			total:0,
		},
		imageMime:XYBase.config.imageMime,
		previewList:[],
		list:[],
	},
	watch:{
	    view:XYBase.viewWatch,
	},
	created(){
		XYBase.created(this);
	},
    methods: {
    	getTitle(val){
    		if (val.size>1024*1024) {
    			return (val.size/1024/1024).toFixed(2)+'GB'
    		}else if (val.size>1024) {
    			return (val.size/1024).toFixed(2)+'M'
    		}else{
    			return val.size.toFixed(2)+'KB'

    		}
    	},
    	setUid(){
    		this.search.uid=this.uid;
    		this.previewList=[];
    		this.list=[];
    		this.search.ajax=false;
    		this.search.page=1;
    		this.search.total=0;
    		this.initHtml();
    	},
    	setType(val){
    		this.search.type=val;
    		this.previewList=[];
    		this.list=[];
    		this.search.ajax=false;
    		this.search.page=1;
    		this.search.total=0;
    		this.initHtml();
    	},
    	setSort(val){
    		this.search.sort=val;
    		this.previewList=[];
    		this.list=[];
    		this.search.ajax=false;
    		this.search.page=1;
    		this.search.total=0;
    		this.initHtml();
    	},
      	initHtml(){
      		var _this=this;
      		if (_this.search.ajax) return;
      		_this.search.ajax=true;
			$.ajax({
				url:'',
				type:'get',
				data:_this.search,
				dataType:'json',
				error:function(err){
					XYBase.error(XYBase.config.system_network_error);
				},
				success:function(ret){
					if (ret) {
						if (ret.code === 0) {
							_this.search.total=ret.data.total;
							var Data=ret.data.data;
							for (var i = 0; i < Data.length; i++) {
								_this.list.push(Data[i]);
								if(_this.imageMime.indexOf(Data[i].mime)>=0){
									_this.previewList.push(Data[i].url);
								}
							}
							_this.search.page++;
      						_this.search.ajax=false;
						}else{
							XYBase.msg(ret.msg);
						}
					}else{
						XYBase.error(XYBase.config.system_network_error);
					}
				}
			});
      	}
    }
});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	var winH=$(window).height();
	var zHeight=60+20+59+43+64;
		if (vm.h<winH-zHeight) 
			vm.initHtml();
		vm.h=winH-zHeight;
}
</script>
{/block}